<template>
    <el-drawer :title="$t('pay.order.wallet.drawer.details')" size="400px" :visible.sync="drawerVisible" @close="$emit('update:visible', false)">
        <vue-simplebar>
            <div class="pt-12 pb-12 pr-3" v-if="data.id">
                <el-form label-width="120px" class="detail">
                    <el-form-item label="UID">{{ data.uid }}</el-form-item>
                    <el-form-item :label="$t('pay.order.wallet.sn')">{{ data.sn }}</el-form-item>
                    <el-form-item :label="$t('platform.setting.tree.org')">{{ data.org.name || data.plat_code }}</el-form-item>
                    <el-form-item :label="$t('game.user.account_id')">{{ data.account_id }}</el-form-item>
                    <el-form-item :label="$t('pay.order.wallet.consume')[data.payment]">
                        <div v-if="data.consume != null">
                            <el-tag effect="plain" size="mini" type="info" class="mr-1" v-for="item in data.consume" :key="item.currency">
                                {{ item.currency }}
                                <component-page-numeral :num="item.quantity"></component-page-numeral>
                            </el-tag>
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('pay.order.wallet.take_back')[data.payment]">
                        <div v-if="data.take_back != null">
                            <el-tag effect="plain" size="mini" type="info" class="mr-1" v-for="item in data.take_back" :key="item.currency">
                                {{ item.currency }}
                                <component-page-numeral :num="item.quantity"></component-page-numeral>
                            </el-tag>
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('pay.order.wallet.status')">
                        <el-tag effect="plain" size="mini" :type="{1:'info',2:'success'}[data.status]">
                            {{ $t('pay.order.wallet.statusList')[data.status].label }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('pay.order.wallet.created')">
                        <component-page-timestamp :timestamp="data.created"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('pay.order.wallet.updated')">
                        <component-page-timestamp :timestamp="data.updated"></component-page-timestamp>
                    </el-form-item>
                    <!--USD-->
                    <div class="pt-6 pl-6 pr-6 pb-4">
                        <el-divider>USD</el-divider>
                    </div>
                    <el-form-item :label="$t('pay.order.wallet.consume')[data.payment]">
                        <div v-if="data.usd.consume != null">
                            <el-tag effect="plain" size="mini" type="info" class="mr-1" v-for="item in data.usd.consume" :key="item.currency">
                                {{ item.currency }}
                                <component-page-numeral :num="item.quantity"></component-page-numeral>
                                ({{ item.rate }})
                            </el-tag>
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('pay.order.wallet.take_back')[data.payment]">
                        <div v-if="data.usd.take_back != null">
                            <el-tag effect="plain" size="mini" type="info" class="mr-1" v-for="item in data.usd.take_back" :key="item.currency">
                                {{ item.currency }}
                                <component-page-numeral :num="item.quantity"></component-page-numeral>
                                ({{ item.rate }})
                            </el-tag>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </vue-simplebar>
    </el-drawer>
</template>

<script>
export default {
    name: "ItemDetails",
    props: ['visible', 'data'],
    data() {
        return {
            drawerVisible: false,
        }
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 显示抽屉
                this.drawerVisible = n;
            }
        }
    },
}
</script>

<style scoped>

</style>
